<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/mall_submit_bg.png') +')'}">
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="goBack()"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#232940"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		 <view class="main rel">
		 	<view class="dangan">
		 		<view class="anitem">
		 			<view class="font-30 text-bold c-base m-b-20 flex-y-center">
						档案1
						<view class="newtag m-l-10">最新</view>
					</view>
					<view class="font-24 c-base">档案更新于</view>
					<view class="font-24 c-base">{{$util.timeStampTurnTime(infoDetail.info.update_time)}}</view>
		 		</view>
				<view class="datas">
					<view class="item" v-for="(item,index) in infoDetail.list" :key="index">
						 <image class="img" :src="$util.img('image/file_2.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">{{item[0].name}}</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">{{item[0].value}}</text>
							 <!-- <view class="flex-y-center">
								 <image :src="$util.img('image/down.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view> -->
						 </view>
					</view>
					<!-- <view class="item">
						 <image class="img" :src="$util.img('image/file_3.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">血压(mmHg)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view>
						 </view>
					</view>
					<view class="item">
						 <image class="img" :src="$util.img('image/file_4.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">心率(次/分钟)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #FF2B3F;">下降7</text>
							 </view>
						 </view>
					</view>
					<view class="item">
						 <image class="img" :src="$util.img('image/file_5.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">体脂率(%)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view>
						 </view>
					</view>
					<view class="item">
						 <image class="img" :src="$util.img('image/file_6.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">腰围(cm)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view>
						 </view>
					</view> -->
				</view>
		 	</view>
			<image :src="$util.img('image/vs.png')" mode="" class="vsimg"></image>
			<view class="dangan m-l-auto">
				<view class="anitem an2">
					<view class="font-30 text-bold c-base m-b-20">档案2</view>
					<view class="font-24 c-base">档案更新于</view>
					<view class="font-24 c-base" v-if="infoDetail.lastData.length">{{$util.timeStampTurnTime(infoDetail.lastData.update_time)}}</view>
				</view>
				<view class="datas">
					<view class="item" v-for="(item,index) in infoDetail.list" :key="index" v-if="item[1].length">
						 <image class="img" :src="$util.img('image/file_2.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">{{item[1].name}}</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">{{item[1].value}}</text>
							 <!-- <view class="flex-y-center">
								 <image :src="$util.img('image/down.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view> -->
						 </view>
					</view>
					<!-- <view class="item">
						 <image class="img" :src="$util.img('image/file_3.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">血压(mmHg)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view>
						 </view>
					</view>
					<view class="item">
						 <image class="img" :src="$util.img('image/file_4.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">心率(次/分钟)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #FF2B3F;">下降7</text>
							 </view>
						 </view>
					</view>
					<view class="item">
						 <image class="img" :src="$util.img('image/file_5.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">体脂率(%)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view>
						 </view>
					</view>
					<view class="item">
						 <image class="img" :src="$util.img('image/file_6.png')" mode="aspectFill"/>
						 <view class="font-24 c-5d">腰围(cm)</view>
						 <view class="flex-between">
							 <text class="font-32 text-bold color-title2">170</text>
							 <view class="flex-y-center">
								 <image :src="$util.img('image/up.png')" mode="" class="down"></image>
								 <text class="font-24 c-78" style="color: #00D075;">上升2</text>
							 </view>
						 </view>
					</view> -->
				</view>
			</view>
		 </view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				infoDetail: {},
				id: ''
			}
		},
		onLoad(data) {
			this.isIphoneX = this.$util.uniappIsIPhoneX()
			this.id = data.id;
			this.getDetail();
		},
		methods: {
			getDetail() {
				this.$api.sendRequest({
			      url: "/api/userHealth/dataCompare",
			      data: {
					hId: this.id
				  },
			      success: res => {
			        if(res.code == 0) {
						this.infoDetail = res.data;
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
			goBack() {
				// 判断路由是否有上一页，如果有则返回上一页，否则返回到首页
				if (getCurrentPages().length > 1) {
					uni.navigateBack()
				}else {
					this.$util.redirectTo('/pages/index/index')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	position: absolute;
	top: 0;
	width: 750rpx;
	height: 316rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
}
.main {
	display: flex;
	.anitem {
		width: 363rpx;
		height: 234rpx;
		border-radius: 0 20rpx 20rpx 0;
		background: #00d075;
		padding: 30rpx 24rpx ;
		box-sizing: border-box;
	}
	.newtag {
		width: 64rpx;
		height: 33rpx;
		line-height: 33rpx;
		text-align: center;
		color: $color-title2;
		font-size: 20rpx;
		background: #fff;
		border-radius: 30rpx;
	}
	.an2 {
		border-radius: 20rpx 0 0 20rpx;
		background: #FFAA0B;
		text-align: right;
	}
}

.datas {
	padding: 24rpx;
	border: 1px solid #FFFFFF;
	border-radius: 20rpx 20rpx 0 0;
	.item {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 315rpx;
		box-sizing: border-box;
		margin-bottom: 14rpx;
		.img {
			width: 57rpx;
			height: 57rpx;
			margin-bottom: 4rpx;
		}
		.down {
		  width: 26rpx;
		  height: 26rpx;
		  margin-left: 20rpx;
		}
	}
}
.vsimg {
	position: absolute;
	top: 64rpx;
	left: 50%;
	margin-left: -51rpx;
	width: 102rpx;
	height: 102rpx;
}
</style>
